<template>
  <el-row>
    <el-form-item label="职业" style="margin-left:15px;width: 150px">
      <el-select v-model="currentClassName" class="m-2" placeholder="请选择您的职业" @change="selectProfessionChange">
        <el-option v-for="item in className" :label="item.value" :value="item.value"/>
      </el-select>
    </el-form-item>
  </el-row>
  <el-row>
    <el-table :data="equipmentList" row-key="id" height="80vh" style="width: 100%">
      <el-table-column prop="buildClass" label="职业" width="100"/>
      <el-table-column prop="buildSchool" label="专精" width="100"/>
      <el-table-column prop="buildName" label="名称" width="600"/>
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <!--          <el-button :icon="Edit" type="info" circle @click="editConfiguration(scope.row)"/>-->
          <el-button :icon="Delete" type="danger" circle @click="deleteConfiguration(scope.row)"/>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
</template>
<script>
import {ElMessage, ElMessageBox} from 'element-plus'
import {Edit, Delete} from '@element-plus/icons-vue'

export default {
  computed: {
    Delete() {
      return Delete
    },
  },
  data() {
    return {
      currentClassName: "全部",
      // 门派列表
      className: [{value: '全部'}, {value: '青云'}, {value: '焚香'}, {value: '鬼王'}, {value: '合欢'}, {value: '灵汐'}],
      //装备列表
      equipmentList: [],
      //全部配装列表
      allEquipmentList: []

    }
  },
  methods: {
    //根据热门推荐配装的Id获取推荐配装
    // async getHotConfigurationId(id) {
    //   this.$http.get('/equipment/builds/' + id).then(response => {
    //     console.log(response.data)
    //     if (response.data.code === 200) {
    //       //应用装备
    //       this.currentEquipment = response.data.data.equipments
    //       response.data.data.equipments.forEach((any, index) => {
    //         if (any.partType === 6) {
    //           if (index === 6) {
    //             this.hufu1 = any
    //           } else if (index === 7) {
    //             this.hufu2 = any
    //           }
    //         }
    //       })
    //       //应用灌注
    //       let upperBodyInlay = []
    //       let headInlay = []
    //       let handInlay = []
    //       let waistInlay = []
    //       response.data.data.inlays.forEach((inlay) => {
    //         switch (inlay.partType) {
    //           case 1://上身
    //             upperBodyInlay.push(inlay)
    //             break
    //           case 2://头部
    //             headInlay.push(inlay)
    //             break
    //           case 3://手部
    //             handInlay.push(inlay)
    //             break
    //           case 4://腰部
    //             waistInlay.push(inlay)
    //             break
    //         }
    //       })
    //       upperBodyInlay.forEach((inlay, index) => {
    //         this.currentUpperBodyInlay[index + 1] = inlay
    //       })
    //       headInlay.forEach((inlay, index) => {
    //         this.currentHeadInlay[index + 1] = inlay
    //       })
    //       handInlay.forEach((inlay, index) => {
    //         this.currentHandInlay[index + 1] = inlay
    //       })
    //       waistInlay.forEach((inlay, index) => {
    //         this.currentWaistInlay[index + 1] = inlay
    //       })
    //       this.calculateEquipment()
    //       this.inlaySelectChange()
    //       // this.applyAttribute()
    //     } else {
    //
    //     }
    //   })
    // },
    //根据职业获取对应的热门配装

    async getConfigurationList(classname) {
      this.$http.get('/equipment/builds/recommend/' + classname).then(response => {
        if (response.data.code === 200) {
          this.allEquipmentList = response.data.data
          this.equipmentList = response.data.data
        } else {
          ElMessage.error(response.data.message);
        }
      }).catch(error => {
        ElMessage.error(error.message)
      })
    },
    //选择职业监听
    selectProfessionChange(any) {
      if (any === "全部") {
        this.getConfigurationList('all')
      } else {
        this.equipmentList = this.allEquipmentList.filter(item => item.buildClass === any)
      }
    },
    // //修改配装名称
    // async editConfiguration(item) {
    //   ElMessageBox.prompt('重命名当前配装名称', '提示', {
    //     confirmButtonText: '提交',
    //     cancelButtonText: '取消',
    //     // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    //     inputErrorMessage: 'Invalid Email',
    //     inputPlaceholder:'请输入新名称',
    //     inputValue: item.buildName
    //   })
    //       .then(({value}) => {
    //
    //         ElMessage({
    //           type: 'success',
    //           message: `修改成功，新名称为:${value}`,
    //         })
    //       })
    // },
    //删除配装
    async deleteConfiguration(item) {
      ElMessageBox.confirm(
          "是否要删除配装【" + item.buildClass + '--' + item.buildSchool + '--' + item.buildName + "】？",
          "删除",
          {
            confirmButtonText: "删除",
            cancelButtonText: "取消",
            type: "warning",
          }
      ).then(() => {
        this.$http.get("equipment/builds/del/" + item.id).then(response => {
          if (response.data.code === 200) {
            ElMessage.success("已删除")

            if (this.currentClassName === "全部") {
              this.getConfigurationList('')
            } else {
              this.getConfigurationList(this.currentClassName)
            }
          } else {
            ElMessage.error(response.data.message)
          }
        })
      }).catch(error => {
        ElMessage.error(error.message)
      })
    }
  },
  created() {
    this.getConfigurationList('all')
  },
  mounted() {

  }
}
</script>
<style scoped>

</style>